<template>
  <datagrid-card id="historyDg">
    <template #toolbar>
      <div class="toolbar-wrapper">
        <el-menu mode="horizontal" defaultActive="1" class="dg-view-menu">
          <el-menu-item index="1">
            <el-icon>
              <platform/>
            </el-icon>
            {{ $t('mes.historicalData') + ' '}}
            <el-tag effect="plain" type="warning" style="margin-left: 10px">{{ (queryParams.productionLineCode || '-') }}</el-tag>
          </el-menu-item>
        </el-menu>
        <div class="menu-right">
          <el-form :inline="true" :model="formData" label-width="80px">
            <el-form-item :label="$t('wms.classes')">
              <el-select v-model="formData.shiftCode" clearable :placeholder="$t('wms.select')" style="width: 130px">
                <el-option
                  v-for="item in shift"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('mes.dateSelection')">
              <el-date-picker style="width: 220px"
                              v-model="formData.dateRange"
                              type="daterange"
                              unlink-panels
                              :range-separator="$t('wms.to')"
                              :start-placeholder="$t('wms.startDate')"
                              :end-placeholder="$t('wms.endDate')"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">
                <el-icon>
                  <search/>
                </el-icon>
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </template>
    <template #default>
      <el-table height="100%"
                :data="data"
                header-align="center"
                stripe
                border
                :header-cell-style="{color:'#000',textAlign:'center'}"
                :cell-style="{textAlign: 'center'}"
                style="width: 100%;">
        <el-table-column
          prop="barcode"
          :label="$t('mes.trayNumber')"
          width="100">
        </el-table-column>
        <el-table-column
          prop="totalQty"
          :label="$t('mes.berOfQualified')"
          width="100">
        </el-table-column>
        <el-table-column
          prop="scrapQty"
          :label="$t('mes.scrapPlates')"
          width="80">
        </el-table-column>
        <el-table-column
          prop="materialCode"
          :label="$t('wms.materialCode')"
          width="100">
        </el-table-column>
        <el-table-column
          prop="materialName"
          :label="$t('wms.materialName')"
          width="140">
        </el-table-column>
        <el-table-column
          prop="materialSpec"
          :label="$t('wms.materialSpce')"
          width="180">
        </el-table-column>
        <el-table-column
          prop="unit"
          :label="$t('wms.unit')"
          width="60">
        </el-table-column>
        <el-table-column
          prop="standardConsume"
          :label="$t('mes.standardQty')"
          width="110">
          <template #default="scope">
            {{ scope.row.standardConsume ? Number(scope.row.standardConsume).toFixed(2) : 0 }}
          </template>
        </el-table-column>
        <el-table-column
          prop="produceEndTime"
          :label="$t('mes.outputTime')"
          width="100">
          <template #default="scope">
            {{ scope.row.produceEndTime || '-' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="shiftCode"
          :label="$t('mes.outputShift')" width="100">
        </el-table-column>
        <el-table-column
          prop="restendTime"
          :label="$t('mes.endTimeOf')" width="110">
          <template #default="scope">
            {{ (scope.row.restendTime || '-') }}
          </template>
        </el-table-column>
        <el-table-column
          prop="qcResult"
          :label="$t('mes.qtyInspectionResult')" width="90">
          <template #default="scope">
            <div class="name-wrapper">
              <el-tag effect="dark" :type="scope.row.qcResult === 'OK' ? 'success' : 'danger'"
              >{{ scope.row.qcResult }}
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="isErpSuccess"
          :label="$t('mes.erpWhether')">
          <template #default="scope">
            <div class="name-wrapper">
              <el-tag effect="dark" :type="scope.row.isErpSuccess === 'Yes' ? 'success' : 'danger'"
              >{{ scope.row.isErpSuccess }}
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="reportStatus"
          :label="$t('wms.reportingStatus')">
        </el-table-column>
      </el-table>
    </template>
  </datagrid-card>
</template>

<script>
import datagridCard from '@/components/common/datagridCard'
import moment from 'moment'
import { paperDocumentInspector } from '@/api/mesApi'

export default {
  name: 'historyDataDg',
  components: { datagridCard },
  inject: ['queryParams'],
  props: {
    data: {
      type: Object,
    },
    queryParams: {
      type: Object
    }
  },
  data () {
    return {
      formData: {
        shiftCode: 'ALL',
        dateRange: []
      },
      shift: [
        {
          label: 'ALL',
          value: ''
        }
      ]
    }
  },
  mounted () {

    const end = new Date(((new Date().getTime() / 1000) ) * 1000)
    this.formData.dateRange.push(end.getFullYear() + '-' + (end.getMonth() + 1) + '-' + end.getDate())
    this.formData.dateRange.push(new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate())
    this.paperDocument()
  },
  methods: {
    onSubmit () {
      this.$emit('search', {
        shiftCode: this.formData.shiftCode,
        mesProduceDate: this.formData.dateRange && this.formData.dateRange.length > 0 ? moment(new Date(this.formData.dateRange[0])).format('YYYY-MM-DD') : '',
        mesProduceDate1: this.formData.dateRange && this.formData.dateRange.length > 0 ? moment(new Date(this.formData.dateRange[1])).format('YYYY-MM-DD') : ''
      })
    },
    // 获取班次
    paperDocument: function () {
      paperDocumentInspector({
        code:'ShiftTime'
      }).then(res => {
        // console.log(res)
        res.data.forEach((item, index) => {
          this.shift.push({
            label: item.text,
            value: item.text
          })
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
#historyDg {
  .toolbar-wrapper {
    position: relative;

    .dg-view-menu {
      width: 100%;
    }

    .menu-right {
      position: absolute;
      top: 10px;
      right: 20px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
